<!-- src/views/User/Company.vue -->
<template>
  <div class="company-info">
    
    <div class="content">
      <div class="info-header">
        <h2>企业信息</h2>
        <el-button type="primary" @click="showEditDialog">修改</el-button>
      </div>

      <div class="info-grid">
        <div class="info-item">
          <label>企业名称：</label>
          <span>{{ companyInfo.name }}</span>
        </div>
        <div class="info-item">
          <label>统一社会信用代码：</label>
          <span>{{ companyInfo.creditCode }}</span>
        </div>
        <div class="info-item">
          <label>公司注册地址：</label>
          <span>{{ companyInfo.registeredAddress }}</span>
        </div>
        <div class="info-item">
          <label>机构类型：</label>
          <span>{{ companyInfo.orgType }}</span>
        </div>
        <div class="info-item">
          <label>企业性质：</label>
          <span>{{ companyInfo.nature }}</span>
        </div>
        <div class="info-item">
          <label>成立日期：</label>
          <span>{{ companyInfo.establishDate }}</span>
        </div>
        <div class="info-item">
          <label>法人/负责人：</label>
          <span>{{ companyInfo.legalPerson }}</span>
        </div>
        <div class="info-item">
          <label>法人/负责人身份证：</label>
          <span>{{ companyInfo.legalPersonId }}</span>
        </div>
        <div class="info-item">
          <label>法人/负责人身份证扫描件：</label>
          <el-link type="primary" @click="viewImage(companyInfo.legalPersonIdScan)">查看图片</el-link>
        </div>
        <div class="info-item">
          <label>单位联系地址：</label>
          <span>{{ companyInfo.contactAddress }}</span>
        </div>
        <div class="info-item">
          <label>经营范围：</label>
          <span>{{ companyInfo.businessScope }}</span>
        </div>
        <div class="info-item">
          <label>公司简介：</label>
          <span>{{ companyInfo.introduction }}</span>
        </div>
        <div class="info-item">
          <label>营业执照有效期：</label>
          <span>{{ companyInfo.licenseValidity }}</span>
        </div>
        <div class="info-item">
          <label>营业执照扫描件：</label>
          <el-link type="primary" @click="viewImage(companyInfo.licenseScan)">查看图片</el-link>
        </div>
        <div class="info-item">
          <label>开户行：</label>
          <span>{{ companyInfo.bankName }}</span>
        </div>
        <div class="info-item">
          <label>银行账号：</label>
          <span>{{ companyInfo.bankAccount }}</span>
        </div>
        <div class="info-item">
          <label>开户行地址：</label>
          <span>{{ companyInfo.bankAddress }}</span>
        </div>
        <div class="info-item">
          <label>单位注册电话：</label>
          <span>{{ companyInfo.registeredPhone }}</span>
        </div>
        <div class="info-item">
          <label>单位注册地址：</label>
          <span>{{ companyInfo.registeredAddress }}</span>
        </div>
        <div class="info-item">
          <label>注册资本（万元）：</label>
          <span>{{ companyInfo.registeredCapital }}</span>
        </div>
        <div class="info-item">
          <label>实缴资本：</label>
          <span>{{ companyInfo.paidInCapital }}万元</span>
        </div>
        <div class="info-item">
          <label>开户许可证/基本户存款信息证：</label>
          <el-link type="primary" @click="viewImage(companyInfo.bankLicenseScan)">查看图片</el-link>
        </div>
      </div>
    </div>

    <!-- 编辑对话框 -->
    <el-dialog v-model="editDialogVisible" title="修改企业信息" width="50%">
      <el-form :model="editForm" label-width="180px" :rules="rules" ref="editForm">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="公司注册地址" prop="registeredAddress">
              <el-input v-model="editForm.registeredAddress"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="企业性质" prop="nature">
              <el-select v-model="editForm.nature" placeholder="请选择">
                <el-option label="私营企业" value="私营企业"></el-option>
                <el-option label="国有企业" value="国有企业"></el-option>
                <el-option label="外资企业" value="外资企业"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <!-- 其他表单字段... -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="法人/负责人" prop="legalPerson">
              <el-input v-model="editForm.legalPerson"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位联系地址" prop="contactAddress">
              <el-input v-model="editForm.contactAddress"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="营业执照扫描件" prop="licenseScan">
              <el-upload
                action="/api/upload"
                :on-success="handleLicenseScanSuccess"
                :before-upload="beforeUpload">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="营业执照有效期" prop="licenseValidity">
              <el-date-picker
                v-model="editForm.licenseValidity"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 更多表单字段... -->

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEditForm">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 图片查看对话框 -->
    <el-dialog :visible.sync="imageDialogVisible" width="50%">
      <img :src="currentImage" style="width: 100%;" alt="预览图片">
    </el-dialog>
  </div>

</template>

<script>
export default {
  name: 'CompanyInfo',
  data() {
    return {
      companyInfo: {
        name: '大连素食有限公司',
        creditCode: '2012000043245689567',
        registeredAddress: '辽宁省大连市金普新区和平路56号',
        orgType: '企业机构',
        nature: '私营企业',
        establishDate: '2021-05-13',
        legalPerson: '李华',
        legalPersonId: '210282198706235543',
        legalPersonIdScan: '/path/to/id-scan.jpg',
        contactAddress: '辽宁省大连市金普新区和平路56号',
        businessScope: '饮食',
        introduction: '大连素食有限公司是一家致力于研究素食美味的公司',
        licenseValidity: '2021/5/13 - 2028/5/13',
        licenseScan: '/path/to/license.jpg',
        bankName: '大连银行',
        bankAccount: '63299427971907320931709',
        bankAddress: '辽宁省大连市金普新区农贸街65号',
        registeredPhone: '8657-4321',
        registeredAddress: '辽宁省大连市金普新区和平路56号',
        registeredCapital: '200.00',
        paidInCapital: '100.00',
        bankLicenseScan: '/path/to/bank-license.jpg'
      },
      editDialogVisible: false,
      editForm: {},
      imageDialogVisible: false,
      currentImage: '',
      rules: {
        registeredAddress: [{ required: true, message: '请输入公司注册地址', trigger: 'blur' }],
        nature: [{ required: true, message: '请选择企业性质', trigger: 'change' }],
        // 其他验证规则...
      }
    }
  },
  methods: {
    showEditDialog() {
      console.log('showEditDialog called');
      console.log('Before:', this.editDialogVisible);
      this.editForm = JSON.parse(JSON.stringify(this.companyInfo))
      this.editDialogVisible = true
      console.log('After:', this.editDialogVisible);
    },
    submitEditForm() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          // 这里应该是调用API提交修改
          this.companyInfo = JSON.parse(JSON.stringify(this.editForm))
          this.$message.success('修改成功')
          this.editDialogVisible = false
        }
      })
    },
    viewImage(url) {
      this.currentImage = url
      this.imageDialogVisible = true
    },
    handleLicenseScanSuccess(response, file) {
      this.editForm.licenseScan = response.data.url
    },
    beforeUpload(file) {
      const isImage = file.type.includes('image/')
      const isLt5M = file.size / 1024 / 1024 < 5
      
      if (!isImage) {
        this.$message.error('只能上传图片文件')
      }
      if (!isLt5M) {
        this.$message.error('图片大小不能超过5MB')
      }
      
      return isImage && isLt5M
    }
  }
}
</script>

<style scoped>
.company-info {
  padding: 0;
}


.content {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.info-item {
  margin-bottom: 15px;
}

.info-item label {
  display: inline-block;
  width: 200px;
  color: #666;
  font-weight: bold;
}

.info-item span {
  color: #333;
}

.el-link {
  vertical-align: baseline;
}
</style>